<template>
  <ul class="nowpl-ul">
    <li
      class="nowpl-ul-li"
      v-for="data in $store.state.nowplayingList"
      :key="data.filmId"
    >
      <div class="nowpl-ul-li-pic fl" @click="handleChangePage(data.filmId)">
        <img class="nowpl-img" :src="data.poster" alt="" />
      </div>
      <div class="nowpl-ul-li-intro" @click="handleChangePage(data.filmId)">
        <span class="nowpl-name yahei-font">{{ data.name }}</span>
        <i
          class="iconfont icon-d filmtype"
          v-if="data.filmType.name == '2D'"
        ></i>
        <i class="iconfont icon-d1 filmtype" v-else></i>
        <p class="nowpl-grade-l font-grow yahei-font">
          观众评分
          <span class="nowpl-grade-r yahei-font">
            {{ data.grade }}
          </span>
        </p>
        <p class="nowpl-director-l font-grow yahei-font">
          主演：
          {{ data.actors | actorfilter }}
        </p>
        <p class="nowpl-nation font-grow yahei-font">
          {{ data.nation }} |
          <span class="nowpl-runtime font-grow yahei-font"
            >{{ data.runtime }}分钟</span
          >
        </p>
      </div>
      <button
        type="button"
        class="nowpl-isPresale presalebtn yahei-font"
        v-if="data.isPresale"
      >
        购票
      </button>
      <button
        type="button"
        class="nowpl-isPresale presalebtn yahei-font"
        v-else
      >
        预售
      </button>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'

Vue.filter('actorfilter', function (data) {
  var newlist = data.map((item) => item.name)
  return newlist.join(' ')
})

export default {
  data () {
    return {
      datalist: []
    }
  },
  methods: {
    handleChangePage (id) {
      console.log(id)
      // 编程式导航
      // this.$router.push(`/detail/${id}`)
      var router = this.$route.path // 获取当前页面路由路径
      this.$router.push({ name: 'detail', params: { id: id } })
    }

  },
  mounted () {
    if (this.$store.state.comingList.length === 0) {
      // ajax
      this.$store.dispatch('getNowplayingListAction')
    } else {
      console.log('huancun')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
